<div class="ui stackable grid">
<div class="three wide column" >
<div class="" style="padding:10px">
  <div class="ui ordered list" style="margin:0 auto!">
    <a class="item" *ngFor="let group_ of allDocsByProject.groups" >
      <span (click)="showApis(group_._id)">{{group_.name}}</span>
      <div class="item" *ngIf="group_.docs&& group_.docs.length > 0">
        <div class="list" >
          <a class="item" *ngFor="let api_ of group_.docs" (click)="showApi(api_._id)">{{api_.name}}</a>
        </div>
      </div>
    </a>
</div>
</div>
</div>

<div class="ten wide column">
  <div class="ui breadcrumb">
    <a class="section">Home</a>
    <i class="right chevron icon divider"></i>
    <a class="section">{{proj.title}}</a>
    <i class="right arrow icon divider"></i>
    <a class="section">{{group.name}}</a>
    <i class="right arrow icon divider"></i>
    <div class="active section">{{apiData.name}}</div>
  </div>

  <h2 class="ui header">{{apiData.name}}</h2>

  <div class="ui one column grid">
    <div class="column">
      <div class="ui raised segment">
        <a class="ui red ribbon label">{{apiData.httpMethod}}</a>
        <span></span>
        <div class="ui medium header">{{apiData.action}}</div>
        <div class="ui small">{{apiData.description}}</div>
        <div class="ui green segment">{{apiData.url}}</div>
        <table class="ui celled padded table">
        <thead>
          <tr>
            <th class="single line">参数名称</th>
            <th class="single line">参数类型</th>
            <th class="single line">模式</th>
            <th class="single line">可选性</th>
            <th class="single line">描述</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let param of apiData.params" >
            <td class="aligned collapsing">
              <h4 class="ui center aligned header">
                  {{param.name}}
              </h4>
            </td>
            <td class="aligned collapsing" style="text-align:center"> {{param.paramType}} </td>
            <td class="aligned collapsing" style="text-align:center"> {{param.paramStyle}} </td>
            <td class="aligned collapsing" style="text-align:center"> {{param.optional==0?"可选":"必选"}} </td>
            <td> {{param.description}} </td>
          </tr>
        </tbody>
      </table>

        <div class="" *ngFor="let resp of apiData.resps">
          <a class="ui red ribbon label">{{resp.respType +" : "+resp.respCode}}</a>
          <div style="height:10px"></div>
          <div class="ui small">
            {{resp.description}}
          </div>

          <code-formatter code="{{resp.content}}" type="{{resp.respType}}"></code-formatter>
          <div style="height:10px"></div>
        </div>
      </div>
    </div>
  </div>

</div>
</div>
